<template>
  <div class="trends-chart-container">
    <div class="chart-header">
      <div class="chart-title">Engagement types over time</div>

      <div class="filter-controls">
        <div class="metric-label comments">Comments</div>
        <div class="metric-label likes">Likes</div>
        <div class="metric-label saves">Saves</div>
        <div class="metric-label shares">Shares</div>
        <div class="metric-label mentions">Mentions</div>
        <div class="metric-label views">Views</div>
        <div class="metric-label posts">Posts</div>
      </div>
      <div class="period-toggle">
        <el-checkbox v-model="checked">Previous Period</el-checkbox>
      </div>
    </div>
    <div class="chart-area">
      <PieChart :option="optionLineGraph" :height="'350px'"></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      timeSelect: "",
      checked: false,
      options: [
        {
          value: "1",
          label: "一月份",
        },
        {
          value: "2",
          label: "二月份",
        },
      ],
      optionLineGraph: {
        subtitle: {
          text: "by scores",
        },
        legend: [
          {
            orient: "horizontal",
            left: "20%", // 使用百分比定位
            bottom: "0%",
            // formatter: (name) => {
            //   // 找到对应系列
            //   const series = this.LanguaeChartOption.series.find(
            //     (s) => s.name === name
            //   );
            //   // 计算该系列数据总和
            //   const total = series.data.reduce((a, b) => a + b, 0);
            //   return `${name}`;
            // },
            textStyle: {
              // 普通文本样式（名称）
              color: "#6a6969",
              fontSize: 12,
              lineHeight: 22, // 行高与图标高度一致（itemHeight: 22）
              rich: {
                valueStyle: {
                  fontWeight: "bold", // 数值加粗
                  // 若需单独设置数值颜色，可添加 color: "#232323"
                },
              },
              padding: [0, 0, 0, 4], // 左侧内边距增加 4px，使文字右移
            },
            itemWidth: 24,
            itemHeight: 24,
            itemGap: 20,

            data: [
              {
                name: "Comments",
                icon: "image://" + require("@/assets/comments.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Share",
                icon: "image://" + require("@/assets/share.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Likes",
                icon: "image://" + require("@/assets/likes.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Saves",
                icon: "image://" + require("@/assets/saves.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Views",
                icon: "image://" + require("@/assets/views.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Mentions",
                icon: "image://" + require("@/assets/mentions.png"),
                textStyle: { color: "#ed6971" },
              },
              {
                name: "Posts",
                icon: "image://" + require("@/assets/posts.png"),
                textStyle: { color: "#454545" },
              },
            ],
          },
        ],
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          right: "1%",
          bottom: "14%",
          top: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "June",
            "July",
            "Aug",
            "Sept",
            "Oct",
            "Nov",
            "Dec",
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
            alignWithLabel: true, // 使刻度线与标签对齐
          },
          axisLabel: {
            margin: 20, // 关键：增加标签与 Y 轴的间距（原值可能为 0 或较小）
            color: "#6a6969",
            fontSize: 12,
          },
        },
        yAxis: [
          {
            type: "value", // 数值轴（用于连续数据）
            axisTick: {
              inside: true, // 刻度线朝内（朝向图表区域）
              interval: 10, // 刻度线间隔（此处可能无效，因 min/max/interval 已定义）
            },
            axisLabel: {
              align: "right",
              margin: 10, // 调整标签与轴线间距
              color: "#6a6969",
              fontSize: 12,
              formatter: function (value) {
                return `${value}k`; // 直接显示数值，如需单位可改为 `${value}k`
              },
            },
            name: "by scores", // 坐标轴名称
            nameGap: 20, // 名称与轴线的距离（单位：像素）
            min: 0, // 坐标轴最小值
            max: 20, // 坐标轴最大值
            interval: 2, // 刻度间隔（相邻刻度的差值）
            position: "left", // 坐标轴位置：左侧
            splitLine: {
              show: false, // 不显示网格线
            },

            nameTextStyle: {
              fontSize: 14, // 名称文字大小
              fontWeight: 400, // 文字粗细
              // align: "right", // 旋转后文字的水平对齐：右对齐（文字右侧贴近轴线）
            },
          },
        ],

        series: [
          {
            name: "Comments",
            symbol: "none",
            smooth: true,
            symbolSize: 18,
            type: "line",
            data: [12, 15, 8, 17, 9, 11, 14, 10, 16, 7, 13, 19],
            yAxisIndex: 0,
            lineStyle: {
              color: "#3BD3DA", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Share",
            type: "line",
            smooth: true,
            symbol: "none",
            data: [5, 5, 7, 4, 4, 3, 3, 3, 5, 6, 7, 8], // 模拟数据
            yAxisIndex: 0,
            lineStyle: {
              color: "#EFB82C", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Likes",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [5, 7, 9, 6, 8, 12, 15, 10, 7, 4, 9, 11],
            yAxisIndex: 0,
            lineStyle: {
              color: "#A563EA", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Saves",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [18, 16, 14, 19, 17, 13, 15, 12, 16, 18, 20, 17],
            yAxisIndex: 0,
            lineStyle: {
              color: "#4199E1", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Views",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [3, 5, 7, 4, 6, 8, 5, 4, 7, 9, 6, 8],
            yAxisIndex: 0,
            lineStyle: {
              color: "#058287", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Mentions",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [20, 18, 19, 17, 20, 16, 18, 19, 17, 15, 18, 20],
            yAxisIndex: 0,
            lineStyle: {
              color: "#ED6971", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Posts",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [7, 9, 6, 8, 5, 7, 4, 6, 8, 7, 5, 9],
            yAxisIndex: 0,
            lineStyle: {
              color: "#155C96", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    console.log(this.timeSelect, "这是值");
  },
};
</script>
<style scoped lang="scss">
.trends-chart-container {
  background: #ffffff;
  border: 1px solid #cdcccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
  padding: 16px 42px;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .chart-title {
      font-size: 18px;
      font-weight: 600;
      color: #454545;
    }

    .filter-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;

      .metric-label {
        padding: 8px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        white-space: nowrap;
      }

      .comments {
        background-color: #3bd3da;
      }
      .likes {
        background-color: #a563ea;
      }
      .saves {
        background-color: #4199e1;
      }
      .shares {
        background-color: #efb82c;
      }
      .mentions {
        background-color: #ed6971;
      }
      .views {
        background-color: #058287;
      }
      .posts {
        background-color: #155c96;
      }
    }

    .period-toggle .el-checkbox {
      font-size: 14px;
      color: #232323;
    }
  }

  .chart-area {
    width: 100%;
    min-height: 300px;
  }
}
</style>
